<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础语法1:插值表达式、data,methods,computed和watch</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app">
<h1 style="color: red;">知识点1：插值表达式</h1>
    <!--{{}}插值表达式符号-->
    <p>我是变量:{{msg}}</p>
    <p>我是表达式:{{num+100}}</p>
    <p>我是条件运算符:{{1+1==2?'ok':'no'}}</p>
    <p>我是方法:{{add()}}</p>
    <h1 style="color: red;">知识点2:data</h1>
    <h3>我们在控制台中可以通过实例名.$data的形式来访问或修改data中的数据</h3>
    <h1 style="color: red;">知识点3:methods</h1>
    <h3>方法的定义有两种形式:1.方法名(){} 2.方法名:function(){}</h3>
    <p>{{sub(99999999)}}</p>
    <h1>知识点4:computed计算属性</h1>
    <h3>当我们遇到比较复杂的逻辑是，
        vue提倡我们使用computed计算属性
        在计算属性里面，我们可以解决比较复杂的逻辑，
        包括逻辑运算，函数调用等，最后只要返回一个结果就可以了
    </h3>
  <p>字符串倒置：{{rev}}</p>
  <p>调用方法字符串倒置：{{revMethod()}}</p>
  <h3>计算属性是基于其依赖的变量进行缓存的，只有它相关的依赖发生改变，才会重新求值，
    而方法是每次页面刷新是都会重新调用
  </h3>
  <h3>通常计算属性是不能进行修改的，是只读的</h3>
  <h1>知识点5：watch 监听</h1>
  <h3>当我们需要在某种状态状态变化时，执行一些其他操作，watch具有状态监听功能
    只要监听到当前vue实例中的数据变化，就会调用当前数据所绑定的方法
  </h3>
  <h4>1.函数式监听器：在watch选项中声明的函数即为函数式监听器，其中函数名就是我们要监听的数据源</h4>
  <h4>2.对象监听器：在watch选项中声明的对象即为对象式监听器，其中的对象名就是我们要监听的数据源</h4>
  
</div>
</body>
</html>

<script>
    const appConn = Vue.createApp({
//data里面放置全部的数据，包括变量和对象
data() {
    return {
        msg:'我的第一个vue页面',
        num:1,
        grade:60,
        users:{
            name:'zhuying',
            age:20
        }
    }
},
//methods里面重置全部的方法
methods: {
    add(){
        return this.num + 100000;
    },
    sub:function(val){
        return this.num + val
    },
    revMethod(){
        console.log("我是方法，我被调用了一次");
        return this.msg.split('').reverse().join('');
    }
},
computed:{

    //在此处防止全部的计算属性
    //字符串倒置
    rev(){
        console.log("我是计算属性，我被调用了一次");
        return this.msg.split('').reverse().join('');
    }
},
watch:{
    //此处放置所有的监听器（侦听器）
    grade(newData,oldData){
console.log("改变前的数据"+oldData);
console.log("改变后的数据"+oldData);
if(oldData < newData){
    console.log("你进步了，不错，奖励100元");
}
else{
    console.log("你退步了，快给我100元");
}
    },
    //对象式监听器
    'users.age':{
        handler(newData,oldData){
            console.log("改变前的数据"+oldData);
            console.log("改变后的数据"+oldData);
            if(newData>=120 || newData<0){
                console.log("你确定你输入的是年龄吗？");
            }
        }
    }
}
    }).mount("#app")
</script>